<template>
  <StudentLayout>
    <div class="flex">
        <el-tree
          class="border-solid border border-slate-300 pr-16 pt-6 pl-6 pb-14 rounded mr-16"
          ref="roleTree"
          style="max-width: 600px"
          :data="allData.roleData"
          show-checkbox
          node-key="name"
          :props="roleProps"
          @check="checkRole"
        />
        <el-tree
          class="border-solid border border-slate-300 pr-16 pl-6 pb-14 rounded pt-6"
          ref="menuTree"
          style="max-width: 600px"
          :data="allData.menuListData"
          show-checkbox
          default-expand-all
          node-key="en_name"
          :props="defaultProps"
        />
    </div>
    <el-button type="primary" class="mt-6" @click="submitTree">确定</el-button>
  </StudentLayout>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import StudentLayout from '@/layouts/StudentLayout.vue'
import  { getMenuList, getRoleList, getMenuRList, editMenuRole } from '@/composables/school'

const defaultProps = {
  children: 'children',
  label: 'name',
}
const roleProps = {
  children: 'children',
  label: 'description',
}

const roleTree = ref()
const menuTree = ref()
const level = ref(0)
const checkMenuKeys = ref([])
const checkRole = async (data) => {
  level.value = data.level
  // 只选中一项 
  roleTree.value.setCheckedKeys([data.name])
  console.log(allData.value.menuListData, '+++')
  await getMenuRList({user_level: data.level, isMange: true}).then(res => {
    checkMenuKeys.value = []
    res.data.forEach(el => {
      if (el.children.length){
        el.children.forEach(ch => {
          checkMenuKeys.value.push(ch.en_name)
        })
      }else{
        checkMenuKeys.value.push(el.en_name)
      }
    })
    allData.value.menuListData.forEach(el => {
      // 如果原始数据有子元素 并且权限也选中了父元素
      if (el.children.length && checkMenuKeys.value.includes(el.en_name)) {
        // 必须子元素也有选中
        let isCheck = false
        el.children.forEach(cl => {
          if(cl.en_name.includes(checkMenuKeys.value)){
            isCheck = true
          }
        })
        // 如果没有选中 去除父元素
        if(!isCheck){
          let index = checkMenuKeys.value.indexOf(el.en_name)
          checkMenuKeys.value.splice(index, 1)
        }
      }
    })
    menuTree.value.setCheckedKeys(checkMenuKeys.value)
  })
}

const submitTree = async () => {
  const treeKey = menuTree.value.getCheckedKeys()
  allData.value.menuListData.forEach(el => {
    if(el.children.some(child => treeKey.includes(child.en_name))){
      treeKey.push(el.en_name)
    }
  })
  const params = {
    level: level.value,
    menu: treeKey
  }
  await editMenuRole(params).then(res => {
      ElMessage({
        message: '编辑成功',
        type: 'success',
      })
  })
}

const menuListAjax = () => {
  return getMenuList().then(res => {
    return res.data
  })
}
const roleListAjax = () => {
  return getRoleList().then(res => {
    return res.data
  })
}
const { data: allData } = await useAsyncData('menu', async () => {
  const [menuListData, roleData] = await Promise.all([
    menuListAjax(),
    roleListAjax()
  ])
  return {menuListData, roleData}
})
</script>
<style scoped>

</style>